<template>
  <div class="user-focus">
     <div class="no-data fx-c bg-w" v-if="!noData" style="padding: 4rem 2rem">
      {{ word }}
    </div>
    <Loading v-if='!res.length && noData'></Loading>
    <template v-else>
      <Item v-for="(item, i) in res" :key="i" :item="item"></Item>
    </template>
  </div>
</template>

<script>
import Item from "@/components/user/userDetail/userDynic/navMenu/focusUser/Item";
import { getUserFocus, getUserDetail } from "@/api/user";
import { normlizeFocusUsers, getSessionStorage, parse } from "@/utils/utils";
import Loading from '@/components/common/Loading';
export default {
  name: "UserFocus",
  components: {
    Item,
    Loading
  },
  data() {
    return {
      res: [],
      word: '用户还没有关注任何作者哦',
      noData: true
    };
  },
  async created() {
    const i = getSessionStorage("cid");
    let id;
    if (i) {
      id = parse(i).id;
    }
    const res = await getUserFocus(id);
    if (res.code === 1) {
      // 获取关注的用户的信息
      const userInfo = await Promise.all(
        res.data.map(async (item) => {
          return await getUserDetail(item.id);
        })
      );
      this.res = normlizeFocusUsers(userInfo);
      if (!this.res.length) this.noData = false;
    }
  },
};
</script>